<template>
    <div id="myCharLineBar" :style="{width: '100%', height: '180px'}"></div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "lineBar.vue",
        data() {
            return {
                option: {}
            }
        },
        mounted() {
            this.inIt();
        },
        methods: {
            inIt() {
                let myChart = echarts.init(document.getElementById('myCharLineBar'));
                let that = this;
                this.option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        show: false,
                        data: ['直接访问', '间接访问']
                    },
                    axisLabel: {
                        color: "#2b6c70"
                    },
                    grid: {
                        right: 80,
                        top: 30,
                        bottom: 20,
                        left: 40,
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: 'category',
                        nameTextStyle: {
                            fontSize: 12,
                            color: '#2d6c71',
                            padding: [0, 0, -25, -5]
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#223e41'
                            }
                        },
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisLine: {
                            lineStyle: {
                                width: 2,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#2d6c71' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#2d6c71' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                            }
                        }
                    },
                    yAxis: {
                        name: '(次数)',
                        splitNumber: 5,
                        nameTextStyle: {
                            fontSize: 12,
                            color: '#2d6c71',
                            padding: [0, 0, 0, -45]
                        },
                        axisTick: {
                            show: false
                        },
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#223e41'
                            }
                        },

                    },
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '30%',
                            barGap: '5%',
                            data: [13, 52, 200, 334, 390, 330, 220],
                            itemStyle: {
                                color: '#20855b'
                            }
                        },
                        {
                            name: '间接访问',
                            type: 'bar',
                            barWidth: '30%',
                            barGap: '5%',
                            data: [10, 52, 200, 334, 390, 330, 220],
                            itemStyle: {
                                color: '#1c6593'
                            }
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(this.option);
                setTimeout(function () {
                    window.onresize = function () {
                        myChart.resize();
                    }
                }, 200)
            }
        }
    }
</script>

<style scoped>

</style>